<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.common.js"></script>
</head>
<style>
  table {
    width: 100%;
  }
</style>

<body>


  <section class="hero is-info">
    <div class="hero-body">
      <p class="title">
        <%=basic.get("detailsName")%>详情页
      </p>
      <p class="subtitle">
      <div class="columns">
        <div class="column is-four-fifth">
          <%=basic.get("detailsName")%>在<span class="is">
              <%=basic.get("faucetTime")%>
            </span> 天前，开始使用FaucetPay进行支付过去24小时支付了约<%=basic.get("past_daily")%>个不同类型的货币，其中<%=basic.get("past_hour")%>
                是过去一小时支付的。我们检测到的最近一次付款是大约<%=basic.get("last_pay")%>分钟前支付的。
        </div>
        <div class="column is-one-fifth"></div>
      </div>
      </p>
    </div>
  </section>


  <div class="tile is-ancestor">
    <div class="tile is-vertical is-8">
      <div class="tile">
        <div class="tile is-parent is-vertical">
          <article class="tile is-child notification ">
            <table class="table is-bordered is-striped ">
              <thead>
                <th colspan="2">Name</th>
                <th>Coin</th>
                <th>
                  Last payment
                </th>
                <th>
                  Balance
                </th>
                <th>
                  Paid(1h)
                </th>
                <th>
                  Paid(24h)
                </th>
                <th>
                  Created
                </th>

              </thead>
              <tr>
                <% faucet_datas.forEach((item,index)=> {%>

              <tr>
                <td>
                  <%= index+1 %>
                </td>
                <td>
                  <a class="namePost">

                    <span>
                      <%= item.name %>
                    </span>
                  </a>
                  <br>
                  <a href="<%= item.url %> ">
                    <%= item.url %>
                  </a>
                </td>
                <td>
                  <%= item.currency %>
                </td>
                <td>
                  <%= item.lastPayment%>
                </td>
                <td>
                  <%= item.balance %>
                    <%= item.currency %>
                </td>
                <td>
                  <%= item.paid_hour%>
                    <%= item.currency %>
                </td>
                <td>
                  <%= item.paid_day %>
                    <%= item.currency %>
                </td>
                <td>
                  <%= item.createTime %>
                </td>

              </tr>

              <% }); %>
                </tr>
            </table>
          </article>
        </div>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification ">
        <table class="table is-bordered is-striped">
          <tr>
            <td>创建日期</td>
            <td>
              <%=basic.get("createTime")%>
            </td>
          </tr>
          <tr>
            <td>活跃用户</td>
            <td>
              <%=basic.get("active_users")%>
            </td>
          </tr>
          <tr>
            <td>拥有者</td>
            <td>
              <%=basic.get("owner_name")%>
            </td>
          </tr>
          <tr>
            <td>用户的其他faucet</td>
            <%basic.get("other_faucet").forEach((value,index)=>{%>

              <td style="display: block;border: none;">
                <a href="/details/<%=value.id%>">
                  <%=value.name%>
                </a>
              </td>

              <%})%>
          </tr>
          <tr>
            <td>一小时支付金额</td>
            <td>
              <%=basic.get("past_hour")%>
            </td>
          </tr>
          <tr>
            <td>一天支付金额</td>
            <td>
              <%=basic.get("past_daily")%>
            </td>
          </tr>
          <tr>
            <td>上周支付金额</td>
            <td>
              <%=basic.get("past_week")%>
            </td>
          </tr>
        </table>
      </article>
    </div>
  </div>


  <div style="border:2px solid #666;width:49%;height:450px;float:left" class="ml-4" id="main_hour"></div>


  <div style="border:2px solid #666;width:49%;height:450px;float:left" class="ml-4" id="main_daily"></div>


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

  <script>

    let index = (window.location.href).lastIndexOf('/')
    let id = (window.location.href).slice(index + 1)


    axios.get("/chart?id=" + id).then((res) => {

      let legend_hour = []
      res.data[0].forEach(element => {
        legend_hour.push(element.name)
      });

      let legend_daily = []
      res.data[1].forEach(element => {
        legend_daily.push(element.name)
      });

      const req1 = { text: "24小时数据图", legend: legend_hour, series: res.data[0], div_id: "main_hour" ,time:res.data[2]}
      const req2 = { text: "30天数据图", legend: legend_daily, series: res.data[1], div_id: "main_daily",time:res.data[3]}
      console.log(res.data[2])
      console.log(res.data[3])
      initCharts(req1)
      initCharts(req2)


    })

    function initCharts(req) {
      const { text, legend, series, div_id ,time} = req

      var myChart = echarts.init(document.getElementById(div_id));
      var option;
      option = {
        title: {
          text: text
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: time
        },
        yAxis: {
          type: 'value'
        },
        series: series
      };

      myChart.setOption(option);
    }


  </script>
</body>

</html>